<template>
  <main>
    <!-- <Button ref="buttonRef" @click="open">Test Button</Button> -->
    <!-- <Button plain @click="close">Plain Button</Button> -->
    <Button round>Round Button</Button>
    <Button circle>VK</Button>
    <Button disabled>Disabled Button</Button><br/><br/>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button><br/><br/>
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain>Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type="warning" plain>Warning</Button>
    <Button type="danger" plain>Danger</Button><br/><br/>
    <Button size="large">Large</Button>
    <Button size="small">Small</Button><br/><br/>
    <Button size="large" loading>Loading</Button>
    <Button size="large" icon="arrow-up">Icon</Button><br/><br/>    

    <Collapse v-model="openedValue" accordion>
      <CollapseItem name="a">
        <template #title>
          <h1>nice title</h1>
        </template>
        <h1>headline title</h1>
        <div> tefwfe</div>
      </CollapseItem>
      <CollapseItem name="b" title="nice title a item b">
        <div> this is bbbbb</div>
      </CollapseItem>
      <CollapseItem name="c" title="nice title a item c" disabled>
        <div> this is cccc</div>
      </CollapseItem>
    </Collapse>
  {{ openedValue }}
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Button from './components/Button/Button.vue';
import Collapse from './components/Collapse/Collapse.vue';
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const openedValue = ref(['a'])
</script>

<style scoped></style>
